<template>
  <div class="box">
		<Header title="数据报告详情"></Header>
		<div class="title">
			<h3>2019年10月旅游数据分析</h3>
			<p>2019-11-1   08:00:00</p>
		</div>
		<div class="item-box">
			<div class="item-title"><img src="@/assets/images/item.png" alt="">本月累计</div>
			<p><b>264.334</b>万</p>
			<p>10月份累计游客量</p>
		</div>
		<div class="item-box">
			<div class="item-title"><img src="@/assets/images/item.png" alt="">性别比例</div>
			<div class="chart-box" id="myChartBox1"></div>
		</div>
		<div class="item-box">
			<div class="item-title"><img src="@/assets/images/item.png" alt="">年龄分布</div>
			<div class="chart-box" id="myChartBox2"></div>
		</div>
		<div class="item-box">
			<div class="item-title"><img src="@/assets/images/item.png" alt="">游客分布</div>
			<div class="chart-box" id="myChartBox3"></div>
		</div>
		<div class="item-box">
			<div class="item-title"><img src="@/assets/images/item.png" alt="">出行方式</div>
			<div class="chart-box" id="myChartBox4"></div>
		</div>
			<div class="item-box">
			<div class="item-title"><img src="@/assets/images/item.png" alt="">客源地TOP10</div>
			<div class="chart-box" id="myChartBox5"></div>
		</div>
  </div>
</template>

<script>
import Header from "@/components/Header/Header.vue";
import Nav from "@/components/Nav/Nav.vue";
export default {
  name:'ReportDetail',
	components: { Header, Nav },
	data(){
		return{
			
		}
	},
	mounted(){
		this.myChart1()
		this.myChart2()
		this.myChart3()
		this.myChart4()
		this.myChart5()
	},
	methods:{
		myChart1(){
			 let myChart = this.$echarts.init(document.getElementById("myChartBox1"));
				let option = {
							title:{
								text: '10月份游客性别占比',
								bottom: 0,
								left: 'center',
								textStyle: {
									fontSize: 14
								}
							},
							grid: {
									top: '10%',
									bottom: '40%',
									left: '10%',
									right: '10%'
							},
							xAxis: {
									data: ['男', '女'],
									axisTick: {
											show: false
									},
									axisLine: {
											lineStyle: {
													color: '#f2f2f2'
											}
									},
									axisLabel: {
											interval: 0,
											margin: 10,
											color: '#000',
											fontSize: 12,
											fontFamily: 'Microsoft YaHei',
											formatter: function (value, index) {
													if (value.length > 2) {
															value = value.substring(0, 2) + '\n' + value.substring(2);
													}
													return value;
											}
									}
							},
							yAxis: {
									splitLine: {
											show: false
									},
									axisTick: {
											show: false
									},
									axisLine: {
											show: false
									},
									axisLabel: {
											show: false
									}
							},
							series: [{
								type:'bar',
								barWidth:16,
								label: {
									show: true,
									position: 'top',
									color: '#000',
									fontSize: 12,
									fontFamily: 'Microsoft YaHei',
									formatter: '{c}%'
								},
								silent: true,
								data:[{name:'男',value:46,itemStyle:{color:'#5B88FB'}},{name:'女',value:58,itemStyle:{color:'#0FD2B2'}}]
							}
								
							]
					};
					 myChart.setOption(option);
		},
		myChart2(){
			let myChart = this.$echarts.init(document.getElementById("myChartBox2"));
			let chartName= ['18岁以下', '18-25岁', '26-35岁', '36-45岁', '46-55岁', '55岁以上'];
			let chartData= ['10','20','30','15','15','10']
			let data=[]
			let legendName=[]
			for (let i=0;i<chartData.length;i++){
					let c={
							value:chartData[i],
							name:chartName[i]+chartData[i]+'%'
					}
					data[i]=c;
					legendName[i]=chartName[i]+chartData[i]+'%';
			}
			let	option = {
					title:{
								text: '10月份游客年龄分布',
								bottom: 0,
								left: 'center',
								textStyle: {
									fontSize: 14
								}
							},
					tooltip: {
							trigger: 'item',
							formatter: "{b} : {d}% <br/> {c}"
					},
					legend: {
							orient: 'vertical',
							x: '70%',
							y:'center',
							itemWidth: 10,
							itemHeight: 10,
							align: 'left',
							textStyle: {
									fontSize:12,
									color: '#000'
							},
							data: legendName
					},
					series: [{
							type: 'pie',
							radius: ['0%', '65%'],
							center: ['30%', '50%'],
							color: ['#5B88FB', '#5BEAFB', '#0FD2B2', '#FCF920', '#E87521', '#FF0000'],
							data: data,
							labelLine: {
									normal: {
											show: false,
											length: 20,
											length2: 20,
											lineStyle: {
													color: '#12EABE',
													width: 2
											}
									}
							},
							label: {
									normal: {
											show:false,
											formatter: '{c|{c}}\n{hr|}\n{d|{d}%}',
											rich: {
													b: {
															fontSize: 20,
															color: '#12EABE',
															align: 'left',
															padding: 4
													},
													hr: {
															borderColor: '#12EABE',
															width: '100%',
															borderWidth: 2,
															height: 0
													},
													d: {
															fontSize: 20,
															color: '#fff',
															align: 'left',
															padding: 4
													},
													c: {
															fontSize: 20,
															color: '#fff',
															align: 'left',
															padding: 4
													}
											}
									}
							}
					}]
			};
			myChart.setOption(option);
		},
		myChart3(){
			let myChart = this.$echarts.init(document.getElementById("myChartBox3"));
			let option = {
				title:{
								text: '10月份游客偏好分析',
								bottom: 0,
								left: 'center',
								textStyle: {
									fontSize: 14
								}
							},
					tooltip: {
							trigger: 'item',
					},
					
					radar: {
							name: {
									textStyle: {
											color: '#000',
											fontSize:12,
									}
							},
							splitLine: {
									lineStyle: {
											color: [
													'#0FD2B2', '#0FD2B2',
													'#0FD2B2', '#0FD2B2',
													'#0FD2B2', '#0FD2B2',
											].reverse()
									}
							},
							splitArea: {
									show: false
							},
							axisLine: {
									lineStyle: {
											color: '#0FD2B2'
									}
							},
							triggerEvent:true,
							indicator:[
								{name:'美食', max:20},
								{name:'娱乐', max:20},
								{name:'购物', max:20},
								{name:'体验', max:20},
								{name:'风光', max:20},
								{name:'历史', max:20}
							], 
							radius:'55%'
					},
					series: [{
							
							type: 'radar',
							name:'指数情况',
							areaStyle: {
									normal: {
											color: 'rgba(91,136,251,.5)'
									}
							},
							label: {
									normal: {
											show: false,
											textStyle: {
													color: '#ffffff',
													fontSize: 12,
											}
									}
							},
							 symbolSize: 0,
							 lineStyle: {
                    normal: {
                        color: 'rgba(91,136,251,.5)',
                        width: 1
                    }
                },
							data:[
									{value : ['5','10','15','20','12','8']}
							],
					}]
			};
			myChart.setOption(option);
		},
		myChart4(){
			let myChart = this.$echarts.init(document.getElementById("myChartBox4"));
			let option = {
						title:{
							text: '10月份游客出行方式分析',
							bottom: 0,
							left: 'center',
							textStyle: {
								fontSize: 14
							}
						},
						grid: {
								top: '10%',
								bottom: '30%',
								left: '10%',
								right: '10%'
						},
						xAxis: {
								data: ['飞机', '火车','大巴','自驾'],
								axisTick: {
										show: false
								},
								axisLine: {
										lineStyle: {
												color: '#f2f2f2'
										}
								},
								axisLabel: {
										interval: 0,
										margin: 10,
										color: '#000',
										fontSize: 12,
										fontFamily: 'Microsoft YaHei',
										formatter: function (value, index) {
												if (value.length > 2) {
														value = value.substring(0, 2) + '\n' + value.substring(2);
												}
												return value;
										}
								}
						},
						yAxis: {
								splitLine: {
										show: false
								},
								axisTick: {
										show: false
								},
								axisLine: {
										show: false
								},
								axisLabel: {
										show: false
								}
						},
						series: [{
							type:'bar',
							barWidth:16,
							label: {
								show: true,
								position: 'top',
								color: '#000',
								fontSize: 12,
								fontFamily: 'Microsoft YaHei',
								formatter: '{c}%'
							},
							silent: true,
							data:[{name:'飞机',value:10,itemStyle:{color:'#5B88FB'}},{name:'火车',value:20,itemStyle:{color:'#5BEAFB'}},{name:'大巴',value:25,itemStyle:{color:'#0FD2B2'}},{name:'自驾',value:46,itemStyle:{color:'#FCF920'}}]
						}
							
						]
				};
					myChart.setOption(option);
		},
		myChart5(){
			let myChart = this.$echarts.init(document.getElementById("myChartBox5"));
		
					// myChart.setOption(option);
		},
	}
}
</script>

<style lang="less" scoped>
.title{
	padding:10/7.5vw 0;
	text-align: center;
	border-bottom: 1px solid #f2f2f2;
	h3{
		font-size: 40/7.5vw;
		margin:30/7.5vw 0;
	}
	p{
		font-size: 28/7.5vw;
	}
}
.item-box{
	padding:30/7.5vw;
	border-bottom: 1px solid #f2f2f2;
	.item-title{
		font-size: 32/7.5vw;
		font-weight: bold;
		img{
			width: 30/7.5vw;
			vertical-align: middle;
			margin-right:10/7.5vw;
		}
	}
	>p{
		font-size: 36/7.5vw;
		text-align: center;
		>b{
			font-size: 66/7.5vw;
			color: #FF0000;
		}
	}
	.chart-box{
		height: 480/7.5vw;
	}
}
</style>